<template>
  <div class="wrapper" ref="datapage">
    <div class="tool">
      <div class="tool-left">
        <el-button type="danger" @click="tapDel" v-if="gridDo.delete">删除</el-button>
        <el-button type="primary" @click="tapCopy" v-if="gridDo.add">复制</el-button>
        <el-button v-for="item in gridTool" :key="item.button" type="primary" @click="tapTool(item)">{{item.button}}</el-button>
      </div>
      <div class="tool-right">
       <el-button type="primary" @click="tapAdd" v-if="gridDo.add">新增</el-button>
      </div>
    </div>
    <page-form :navTree="navTree" ref="editForm" formTypeProp="edit" :formSize="formSize" :formWidth="formWidth" :formData="editForm" :formSubData="editSubForm"  @submitSuccess="editSuccess" :controller="controller" :resource="resource"  :getEditActionProp="getEditActionProp" :editActionProp="editActionProp"></page-form>
    <dialog-form ref="addForm" formTypeProp="add" :formSize="formSize" :formWidth="formWidth" :formData="addForm" :formSubData="addSubForm"   @submitSuccess="addSuccess" :controller="controller" :resource="resource"></dialog-form>
    <template v-for="item in custForm">
      <dialog-form :key="item.button" ref="custForm" :formTitle="item.formTitle" :formTypeProp="item.custType == 'form' ? 'edit' : 'look'" :width="item.formWidth" :formData="item.editForm" :formSubData="item.editFormSub"  @submitSuccess="custOperateSuccess" :getEditActionProp="item.getEditActionProp" :editActionProp="item.editActionProp"></dialog-form>
    </template>
  </div>

</template>
<style scoped>
.wrapper{width:100%;}
.tool{display: flex;justify-content: space-between;margin-bottom:20px;width:100%;}

</style>
<script>
//delData方法不一样，处理restfulApi
import DialogForm from '@/components/common/dialogForm';
import PageForm from '@/components/common/pageForm';
import { getPage,getEdit,delData,delSure} from '@/api/common';


export default {
  components:{
    PageForm,
    DialogForm
  },
  props:{
    navTree:{
      type:Object,
      default(){
        return {}
      }
    },
    customize:{
      type:Array,
      default(){
        return [];
      }
    },
    controller:{
      type:String,
      default(){
        return '';
      }
    },
    resource:{
      default(){
        return 'id';
      }
    },
    getPageAction:{
      type:String,
      default(){
        return '';
      }
    },
    formSize:{
      type:String,
      default(){
        return '';
      }
    },
    getEditActionProp:{
      type:String,
      default(){
        return '';
      }
    },
    editActionProp:{
      type:String,
      default(){
        return '';
      }
    },
    //表格名称，匹配用户设置
    gridName:{
      type:String,
      default(){
        return '';
      }
    },
    /*表格主部属性 */
    gridField:{
      type:Array,
      default(){
        return []
      }
    },
    /*表格子部属性 */
    gridFieldSub:{
      type:Array,
      default(){
        return []
      }
    },
    gridData:{
      type:Array,
      default(){
        return []
      }
    },
    gridDo:{
      type:Object,
      default(){
        return {};
      }
    },
    gridTool:{
      type:Object,
      default(){
       return {}
      }
    },
    rowClass:{
      type:String,
      default(){
        return '';
      }
    },
    /*分页属性*/
    pageSizeOption:{
      type:Array,
      default:function(){
        return  [20, 40, 60, 100,500,1000]
      }
    },
    currentPageSize:{
      type:Number,
      default(){
        return 20
      }
    },
    currentPage:{
      type:Number,
      default(){
        return 1
      }
    }
  },
  data(){
    return {
      gridSearch:[],
      searchField:[],
      addForm:{},
      addSubForm:[],
      editForm:{},
      editSubForm:[],
      searchForm:{},
      searchSubForm:[],
      list:[],
      total:0,
      formWidth:'',
      pageSize:20,
      page:1,
      searchData:[],
      sortData:[],//排序
      tableField:[],
      custForm:[],
      custButton:[],
      query:{}
    }
      
  },
  mounted(){
       //因为用到了ref
    //this.getPage();
  },
  created(){
    this.customize.forEach(item=>{
      this.custButton.push(item);
      if (item.custType == 'form' || item.custType == 'look'){
        this.custForm.push(this.initForm(item));
      }
    })
    if (this.formSize == 'small') {
      this.formWidth = '500px';
    } else if (this.formSize == 'big'){
      this.formWidth = '1280px';
    } else {
      this.formWidth = '960px';
    }
    this.gridField.forEach(item => {
      /*
      //处理搜索栏
      if (item.isSearch) {
        this.searchField.push({label:item.label,value:item.field});
        if ( item.isSearchDefault) {
          item.fieldValue = item.field ;
          this.gridSearch.push(item);
        }
      }*/
      //处理新增窗口
      if (item.isAdd) {
        this.addForm[item.field] = {...item};
        if (this.addForm[item.field].type == 'pics') {
          this.addForm[item.field].value = [];
        } else {
          this.addForm[item.field].value = '';
        }
        if (this.addForm[item.field].addReadonly) {
          this.addForm[item.field].readonly = true;
        }
      }
      if (item.isEdit) {
        this.editForm[item.field] = {...item};
        if (this.editForm[item.field].type == 'pics') {
          this.editForm[item.field].value = [];
        } else {
          this.editForm[item.field].value = '';
        }
        if (this.editForm[item.field].editReadonly) {
          this.editForm[item.field].readonly = true;
        }
      }
      if (item.isSearch){
        if (item.type != 'pics' && item.type != 'richtext') this.searchForm[item.field] = {...item};
      }
    });

    this.gridFieldSub.forEach((group,groupIndex) => {
      let addSubForm = {};
      let editSubForm = {};
      let searchSubForm = {};
      group.fields.forEach(item=>{
        /*
        //处理搜索栏
        if (item.isSearch) {
          this.searchField.push({label:item.label,value:item.field});
          if ( item.isSearchDefault) {
            item.fieldValue = item.field ;
            this.gridSearch.push(item);
          }
        }*/
        //处理新增窗口
        if (item.isAdd) {
          
          addSubForm[item.field] = {...item};
          if (addSubForm[item.field].type == 'pics') {
            addSubForm[item.field].value = [];
          } else {
            addSubForm[item.field].value = '';
          }
          if (addSubForm[item.field].addReadonly) {
            addSubForm[item.field].readonly = true;
          }
        }
        if (item.isEdit) {
          editSubForm[item.field] = {...item};
          if (editSubForm[item.field].type == 'pics') {
            editSubForm[item.field].value = [];
          } else {
            editSubForm[item.field].value = '';
          }
          if (editSubForm[item.field].editReadonly) {
            editSubForm[item.field].readonly = true;
          }
        }
        if (item.isSearch){
          if (item.type != 'pics' && item.type != 'richtext') searchSubForm[item.field] = {...item};
        }
      });
      this.addSubForm.push({formTitle:group.title,formData:addSubForm});
      this.editSubForm.push({formTitle:group.title,formData:editSubForm});
      this.searchSubForm.push({formTitle:group.title,formData:searchSubForm});
    });
    let tableField = [...this.gridField];
    this.gridFieldSub.forEach(item=>{
      tableField = tableField.concat(item.fields);
    });
    this.tableField = tableField;

  },
  methods:{
    initForm(formParams){
      if (formParams.formSize == 'small') {
        formParams.formWidth = '500px';
      } else {
        formParams.formWidth = '960px';
      }
      if (formParams.gridField) {
        formParams.addForm = {};
        formParams.editForm = {};
        formParams.gridField.forEach(item => {
          /*
          //处理搜索栏
          if (item.isSearch) {
            this.searchField.push({label:item.label,value:item.field});
            if ( item.isSearchDefault) {
              item.fieldValue = item.field ;
              this.gridSearch.push(item);
            }
          }*/
          //处理新增窗口
          if (item.isAdd) {
            formParams.addForm[item.field] = {...item};
            if (formParams.addForm[item.field].type == 'pics') {
              formParams.addForm[item.field].value = [];
            } else {
              formParams.addForm[item.field].value = '';
            }
            if (formParams.addForm[item.field].addReadonly) {
              formParams.addForm[item.field].readonly = true;
            }
          }
          if (item.isEdit) {
            formParams.editForm[item.field] = {...item};
            if (formParams.editForm[item.field].type == 'pics') {
              formParams.editForm[item.field].value = [];
            } else {
              formParams.editForm[item.field].value = '';
            }
            if (formParams.editForm[item.field].editReadonly) {
              formParams.editForm[item.field].readonly = true;
            }
          }
        });
      }
      if (formParams.gridFieldSub) {
        formParams.addSubForm = [];
        formParams.editSubForm = [];
        formParams.gridFieldSub.forEach((group,groupIndex) => {
          let addSubForm = {};
          let editSubForm = {};
          group.fields.forEach(item=>{
            /*
            //处理搜索栏
            if (item.isSearch) {
              this.searchField.push({label:item.label,value:item.field});
              if ( item.isSearchDefault) {
                item.fieldValue = item.field ;
                this.gridSearch.push(item);
              }
            }*/
            //处理新增窗口
            if (item.isAdd) {
              
              addSubForm[item.field] = {...item};
              if (addSubForm[item.field].type == 'pics') {
                addSubForm[item.field].value = [];
              } else {
                addSubForm[item.field].value = '';
              }
              if (addSubForm[item.field].addReadonly) {
                addSubForm[item.field].readonly = true;
              }
            }
            if (item.isEdit) {
              editSubForm[item.field] = {...item};
              if (editSubForm[item.field].type == 'pics') {
                editSubForm[item.field].value = [];
              } else {
                editSubForm[item.field].value = '';
              }
              if (editSubForm[item.field].editReadonly) {
                editSubForm[item.field].readonly = true;
              }
            }
          });
          formParams.addSubForm.push({formTitle:group.title,formData:addSubForm});
          formParams.editSubForm.push({formTitle:group.title,formData:editSubForm});
        });
      }
      let tableField = [];
      if (formParams.gridField) tableField =[...formParams.gridField];
      if (formParams.gridFieldSub) {
          formParams.gridFieldSub.forEach(item=>{
          tableField = tableField.concat(item.fields);
        });
      }
      formParams.tableField = tableField;
      return formParams;
    },
    tapCustBtn(callbackEvent,row){
      this.$emit('tapCustBtn',callbackEvent,row);
    },
    addSuccess(){
      this.$emit('addSuccess');
    },
    editSuccess(){
      this.$emit('editSuccess')
    },
    tapAdd(){
      this.$refs.addForm.openForm();
    },
    tapDel(){
      if (!this.query[this.resource]) return this.$tool.toast('请先选择要删除的节点内容');
      this.delData(this.query[this.resource])
    },
    tapCopy(){
      if (!this.query[this.resource]) return this.$tool.toast('请先选择要复制的节点内容');
      this.$refs.addForm.openForm(this.query[this.resource]);
    },
    delData(id,msg = ''){
      this.$confirm(msg ? msg : '此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let actionUrl,params = {};
          if (this.$system.requestApiStyle == 'restful') {
            actionUrl = this.delDataAction ? this.delDataAction : this.controller + '';
            if (this.resource) actionUrl += '/'+id;
          } else {
            actionUrl = this.delDataAction ? this.delDataAction : this.controller + '/delData';
            params.data = {id};
          }
          delData(actionUrl,params).then(data =>{
            this.$tool.succToast('删除成功');
            this.$emit('delSuccess')
          });
        }).catch(() => {
          //取消        
        });
    },
    tapTool(item){
      this.$emit('tapTool',item);
    },
    setQuery(query){
      this.query = query;
      this.$refs.editForm.setQuery(query);
    }
  }
}

</script>